
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog, showToast } from 'vant';
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
export default defineComponent({
    setup() {
        let router = useRouter()
        const active = ref(0);
        let type: any = ref(1);
        let typeblack: any = ref(1);
        const store = useCounterStore();
        const { userInfoheard } = storeToRefs(store)

        let back: any = (): any => {
            router.push({ path: "/userinfo" })

        }
        let changetype = (btn: any) => {
            type.value = Number(btn);
        }
        let changeblacktype = (btn: any) => {
            typeblack.value = Number(btn);
        }
        // vip
        let isVip:any= ref(0)
        let localVip = JSON.parse(window.localStorage.getItem("vip"))
        let vipArr: any = ref(localVip || {});
        let nowUserId: any = JSON.parse(window.localStorage.getItem("userId"));
        let openvip = (viptype: any) => {

            if (viptype == 1) {
                showConfirmDialog({
                    message:
                        '确认开通普通vip吗?',
                })
                    .then(() => {
                        // on confirm
                        showToast('开通成功')
                        isVip.value = 1
                        vipArr.value =
                        {
                            id: nowUserId,
                            Vip: isVip.value
                        }
                        console.log("isVip=>", isVip.value)
                        window.localStorage.setItem("vip", JSON.stringify(vipArr.value))
                        console.log("vipArr=>", vipArr.value)
                    })
                    .catch(() => {
                        // on cancel
                    });
            }
            if (viptype == 2) {
                showConfirmDialog({
                    message:
                        '确认开通超级vip吗?',
                })
                    .then(() => {
                        // on confirm
                        showToast('开通成功')
                        isVip.value = 2
                        vipArr.value =
                        {
                            id: nowUserId,
                            Vip: isVip.value
                        }
                        console.log("isVip=>", isVip.value)
                        window.localStorage.setItem("vip", JSON.stringify(vipArr.value))
                        console.log("vipArr=>", vipArr.value)
                    })
                    .catch(() => {
                        // on cancel
                    });
            }
        }
        onMounted(() => {
            store.getUserInfoFun();
            localVip = JSON.parse(window.localStorage.getItem("vip"));

            vipArr.value = localVip || {};
        })
        return {
            active,
            back,
            type,
            changetype,
            changeblacktype,
            typeblack,
            openvip,
            userInfoheard,
            // isVip,
            vipArr,

        };

    },



})


</script>

<template>
    <div class="vip">
        <div class="vip-top">
            <span class="iconfont icon-xiangzuojiantou" @click="back"></span>
            <span class="vip-enter">会员中心</span>
        </div>
        <!-- vip卡片 -->
        <div class="vip-card">
            <img :src="userInfoheard.avatar">
            <div class="card-name">
                <p class="vip-name">{{ userInfoheard.username }}
                    <span class="iconfont icon-huiyuanzhongxin1" style="color:#d55645" v-show="vipArr.Vip==1 "></span>
                    <span class="iconfont icon-huiyuanzhongxin1" style="color:gold" v-show="vipArr.Vip == 2"></span>
                </p>

                <p class="state" v-show="vipArr.Vip == 0">未开通会员</p>
                <p class="state" v-show="vipArr.Vip==1" style="color:#d55645">VIP</p>
                <p class="state" v-show="vipArr.Vip == 2" style="color:gold">SVIP</p>


            </div>

        </div>

        <!-- 开通vip -->
        <div class="activate">
            <div class="activate-nav">
                <van-tabs v-model:active="active" line-width="112px">
                    <p>选择开通时长</p>
                    <van-tab title="普通会员">
                        <div class="normal-vip">
                            <van-swipe class="my-swipe" :show-indicators="false">
                                <van-swipe-item :style="type == 1 ? 'border-color:red' : ''" @click.stop="changetype(1)">
                                    <div class="vip-box">
                                        <p class="year">连续包年</p>
                                        <div><span class="money">￥</span><em> 348</em> /年</div>
                                        <del>￥1,990/年</del>
                                        <p class="average">平均￥29/月</p>
                                    </div>
                                </van-swipe-item>
                                <van-swipe-item :style="type == 2 ? 'border-color:red' : ''" @click.stop="changetype(2)">
                                    <div class="vip-box">
                                        <p class="year">连续包月</p>
                                        <div><span class="money">￥</span><em> 40</em> /月</div>
                                        <del>￥200/月</del>
                                        <p class="average">平均￥40/月</p>
                                    </div>

                                </van-swipe-item>
                                <van-swipe-item :style="type == 3 ? 'border-color:red' : ''" @click.stop="changetype(3)">
                                    <div class="vip-box">
                                        <p class="year">连续包季</p>
                                        <div><span class="money">￥</span><em> 112</em> /季度</div>
                                        <del>￥598/季度</del>
                                        <p class="average">平均￥37.3/月</p>
                                    </div>

                                </van-swipe-item>
                                <van-swipe-item :style="type == 4 ? 'border-color:red' : ''" @click.stop="changetype(4)">
                                    <div class="vip-box">
                                        <p class="year">1年会员</p>
                                        <div><span class="money">￥</span><em> 548</em> </div>
                                        <del>￥1,999/年</del>
                                        <p class="average">平均￥45.7/月</p>
                                    </div>
                                </van-swipe-item>
                                <van-swipe-item :style="type == 5 ? 'border-color:red' : ''" @click.stop="changetype(5)">
                                    <div class="vip-box">
                                        <p class="year">3个月会员</p>
                                        <div><span class="money">￥</span><em> 178</em> </div>
                                        <del>￥598</del>
                                        <p class="average">平均￥59.3/月</p>
                                    </div>
                                </van-swipe-item>
                                <van-swipe-item :style="type == 6 ? 'border-color:red' : ''" @click.stop="changetype(6)">
                                    <div class="vip-box">
                                        <p class="year">单月会员</p>
                                        <div><span class="money">￥</span><em> 68</em> </div>
                                        <del>￥199</del>
                                        <p class="average">平均￥68/月</p>
                                    </div>
                                </van-swipe-item>
                            </van-swipe>

                            <div class="normal-btn" @click="openvip(1)">
                                确认协议并开通会员
                            </div>
                        </div>
                    </van-tab>


                    <van-tab title="超级会员">
                        <div class="super-vip">
                            <van-swipe class="my-swipe" :show-indicators="false">
                                <van-swipe-item :style="typeblack == 1 ? 'border-color:red' : ''"
                                    @click.stop="changeblacktype(1)">
                                    <div class="vip-box">
                                        <p class="year">连续包年</p>
                                        <div><span class="money">￥</span><em> 1,998</em> /年</div>
                                        <del>￥3,999/年</del>
                                        <p class="average">平均￥166.5/月</p>
                                    </div>
                                </van-swipe-item>
                                <van-swipe-item :style="typeblack == 2 ? 'border-color:red' : ''"
                                    @click.stop="changeblacktype(2)">
                                    <div class="vip-box">
                                        <p class="year">连续包月</p>
                                        <div><span class="money">￥</span><em> 188</em> /月</div>
                                        <del>￥398/年</del>
                                        <p class="average">平均￥188/月</p>
                                    </div>

                                </van-swipe-item>
                                <van-swipe-item :style="typeblack == 3 ? 'border-color:red' : ''"
                                    @click.stop="changeblacktype(3)">
                                    <div class="vip-box">
                                        <p class="year">一年</p>
                                        <div><span class="money">￥</span><em> 2399</em> </div>
                                        <del>￥4,995/年</del>
                                        <p class="average">平均￥199.9/月</p>
                                    </div>

                                </van-swipe-item>
                                <van-swipe-item :style="typeblack == 4 ? 'border-color:red' : ''"
                                    @click.stop="changeblacktype(4)">
                                    <div class="vip-box">
                                        <p class="year">3个月</p>
                                        <div><span class="money">￥</span><em> 748</em></div>
                                        <del>￥1,194</del>
                                        <p class="average">平均￥249.3/月</p>
                                    </div>
                                </van-swipe-item>
                            </van-swipe>

                            <div class="super-btn" @click="openvip(2)">
                                确认协议并开通会员
                            </div>

                        </div>

                    </van-tab>
                </van-tabs>
            </div>

        </div>


    </div>
</template>

<style lang="scss">
* {
    padding: 0px;
    margin: 0px;
}

.vip {
    height: 100vh;
    background-color: #f7f7f7;

    .vip-top {
        // display: flex;
        height: 45px;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        line-height: 45px;

        // align-items: center;
        span {
            font-weight: bolder;
        }

        .vip-enter {
            text-align: center;
            margin-left: 124px;

        }
    }

    .vip-card {
        width: 100%;
        height: 94px;
        display: flex;
        padding-left: 16px;
        box-sizing: border-box;
        background-color: #222222;
        align-items: center;

        img {
            width: 53px;
            height: 53px;
            border-radius: 50%;
            margin-right: 13px;
        }

        .card-name {
            .vip-name {
                color: #ffffff;
                font-weight: bolder;
            }

            .state {
                color: #7e7c7d;
                font-size: 12px;
                margin-top: 10px;
            }
        }
    }

    .activate {
        background-color: #ffffff;
        margin-top: 12px;
        height: 500px;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;

        .activate-nav {
            .van-tabs__line {
                background-color: #d35546;

            }

            .van-tab__text--ellipsis {
                font-size: 16px;
                font-weight: bold;
            }

            p {
                font-size: 11px;
                margin-top: 20px;
                margin-bottom: 20px;
            }
        }

        .normal-vip,
        .super-vip {
            .van-swipe-item {
                width: 125px !important;
                height: 140px;
                border: 2px solid #f2f2f2;
                border-radius: 5px;
                margin-right: 11px;
            }

            .vip-box {
                .year {
                    font-weight: bolder;
                    font-size: 14px;
                    margin: 10px;
                    // text-align: center;
                }

                div {
                    margin: 10px;

                    .money {
                        color: #ce3829;
                    }

                    em {
                        font-size: 22px;
                        font-weight: bolder;
                        color: #ce3829;
                    }

                }

                del {
                    color: #b8aead;
                    font-size: 11px;
                    margin: 10px;
                }

                .average {
                    color: #e27267;
                    font-size: 13px;
                    margin: 10px;
                }

            }

            .normal-btn {
                margin-top: 25px;
                width: 334px;
                height: 44px;
                border-radius: 30px;
                color: #ffffff;
                background-color: #d55645;
                text-align: center;
                line-height: 44px;
            }


        }

        .super-btn {
            margin-top: 25px;
            width: 334px;
            height: 44px;
            border-radius: 30px;
            color: #ffd2d4;
            background-color: #0f0f0f;
            text-align: center;
            line-height: 44px;

        }
    }

}
</style>